<script setup lang="ts">
import { addDeviceAPI, editDeviceAPI } from "@/api/destribute.ts";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
import type { FormInstance } from 'element-plus'

const dialogAddDeviceVisible = ref(false)
const emits = defineEmits(['getDeviceData'])
const id = ref()
const typeRef = ref(0)
const formRef = ref<FormInstance>()
const deviceData = reactive({
  name: '',
  number: 0,
  serialNumber: '',
  purchaseDate: '',
  purchasePrice: ''
})

// 初始化
const init = (row: any, type: any) => {
  id.value = row._id
  typeRef.value = type
  dialogAddDeviceVisible.value = true
  if (type === 0) {
    deviceData.name = ''
    deviceData.number = 0
    deviceData.serialNumber = ''
    deviceData.purchaseDate = ''
    deviceData.purchasePrice = ''
  } else {
    deviceData.name = row.name
    deviceData.number = row.number
    deviceData.serialNumber = row.serialNumber
    deviceData.purchaseDate = row.purchaseDate
    deviceData.purchasePrice = row.purchasePrice
  }
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 添加设备
const handleCommit = async () => {
  dialogAddDeviceVisible.value = false
  const res = await addDeviceAPI(deviceData)
  emits('getDeviceData')
  ElMessage({
    type: 'success',
    message: res.message
  })
  handleClose()
}

// 编辑设备
const handleChange = async () => {
  dialogAddDeviceVisible.value = false
  const res = await editDeviceAPI(id.value, deviceData)
  ElMessage({
    type: res.code === 0 ? 'success' : 'error',
    message: res.message
  })
  emits('getDeviceData')
  handleClose()
}

// 取消
const handleClose = () => {
  dialogAddDeviceVisible.value = false
  resetForm(formRef.value)
}

defineExpose({
  init,

})
</script>

<template>
  <!-- 添加设备 -->
  <el-dialog :close-on-click-modal="false" width="30%" v-model="dialogAddDeviceVisible"
             :title="typeRef === 0 ? '添加设备' : '编辑设备'">
    <el-form
      ref="formRef"
      :model="deviceData"
      status-icon
      class="demo-ruleForm"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="deviceData.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="数量" prop=number>
        <el-input-number v-model="deviceData.number" :min="1" :max="1000" />
      </el-form-item>
      <el-form-item label="型号" prop="serialNumber">
        <el-input v-model="deviceData.serialNumber" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="价格" prop="purchasePrice">
        <el-input v-model.number="deviceData.purchasePrice" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="日期" prop="purchaseDate">
        <el-input v-model="deviceData.purchaseDate" placeholder="年-月-日格式" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" v-if="typeRef === 0" @click="handleCommit">
              确定
            </el-button>
              <el-button type="primary" v-else @click="handleChange">
              修改
            </el-button>
          </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
